@import 'lib.less';
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  min-width: 1200px;
  .BC(#e9ecf3);
  .header {
    height: 75px;
    .font1(14px,75px);
    .BC(#3B3F51);
    color: @white-1;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: @white-1;
        img {
          .boxSize1(40px);
          .borderRadius(20px);
          margin: 17px 0px 18px 10px;
          float: right;
        }
      }
    }
    .logo {
      height: 75px;
      .font1(22px,75px);
      padding: 24px 20px 24px 15px;
      img {
        float: left;
        height: 27px;
      }
      .txt {
        color: @white-1;
      }
    }
    .logo-width{
      width: 230px;
    }
    .logo-collapse-width{
      width: 60px;
    }
    .tools{
      padding: 0 23px;
      .boxSize2(14px,75px);
      .font1(14px,75px);
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    position: absolute;
    top: 75px;
    bottom: 0;
    overflow: hidden;
    aside {
      padding: 20px;
      .el-menu{
        height: 100%;
        border: 0;
        .BC(@white-1);
        padding: 15px 0;
        .borderRadius(5px);
        overflow: inherit!important;
        .sidebar-search-wrapper .sidebar-search {
          padding: 0;
          margin: 22px 18px;
          .input-group{
            border-bottom: 1px solid @black-3;
            .form-control{
              border: 0;
              .font2(14px,normal);
              padding: 0;
              height: auto;
              .BC(@black-4);
              color: #4e5d6f;
            }
            .input-group-btn {
              float: right;
              a{
                i{
                  color: #4e5d6f;
                  font-size: 15px;
                }
              }
            }
          }
        }
        .is-opened{
          .el-submenu__title{
            color: @blue-6;
            .BC(@white-5);
            i{
              color: @blue-6;
            }
            &:hover,&:focus{
              color: @blue-6;
              .BC(@white-5);
            }
          }
        }
        >li.el-submenu{
          color: @black-1;
          margin: 1px 0;
          overflow: hidden;
          &:hover, &:focus{
            color: @blue-6;
            .BC(@white-5);
          }
          i{
            font-size: 15px;
            color: @gray-3;
          }
          .el-submenu__title{
            height: 45px;
            line-height: 45px;
            color: @black-1;
            &:hover,&:focus{
              color: @blue-6;
              .BC(@white-5);
            }
          }
          .el-menu--inline{
            .BC(@white-1);
            padding: 10px 0;
            .el-menu-item{
              height: 37px;
              line-height: 37px;
              margin: 2px 0;
              color: @black-1;
              letter-spacing: 1px;
              &.is-active {
                color:@blue-6;
                .BC(@white-5);
                &:hover,&:focus{
                  .BC(@white-5);
                }
              }
              &:hover,&:focus{
                color:@blue-6;
                .BC(@white-5);
              }
            }

          }
          &.is-active{
            .el-submenu__title{
              color: @blue-6;
              .BC(@white-5)!important;
              border-left: 3px solid @blue-6!important;
              padding-left: 15px;
              i{
                color: @blue-6;
              }
              &:hover,&:focus{
                .BC(@white-5)!important;
              }
            }
            .selected {
              display: none;
              float: right;
              position: absolute;
              right: 0;
              top: 10px;
              background: 0 0;
              width: 0;
              height: 0;
              border-top: 12px solid transparent;
              border-bottom: 12px solid transparent;
              border-right: 12px solid #fff;
            }
          }
        }

      }
    }
    .collapsed{
      width: 60px;
      padding: 10px 0 10px!important;
      z-index: 99999;
      .item{
        position: relative;
        &:hover{
          width: 236px;
          .el-submenu__title{
            i{
              color: @white-1;
            }
            color: @blue-6;
            .BC(@white-5);
            .title{
              display: inline-block;
            }
          }
        }
        .el-submenu__title{
          .title{
            padding-left: 28px;
            letter-spacing: 1px;
            text-align: right;
            display: none;
          }
        }
      }
      .submenu{
        position:absolute;
        top:45px;
        left:60px;
        z-index:99999;
        height:auto;
        display:none;
        .BC(@white-1);
        margin-left: 1px;
        .borderRadius(0);
        padding: 0;
        .el-menu-item{
          height: 35px;
          line-height: 35px;
          margin: 2px 0;
          color: @black-5;
          letter-spacing: 1px;
          min-width: 175px;
          padding-left: 15px!important;
          text-align: left;
          &.is-active {
            color: @blue-6;
            .BC(@white-5);
            &:hover,&:focus{
              .BC(@white-5);
            }
          }
          &:hover,&:focus{
            color: @blue-6;
            .BC(@white-5);
          }
        }
      }

    }
  }
  .menu-collapsed{
    flex:0 0 60px;
    width: 60px;
  }
  .menu-expanded {
    flex: 0 0 260px;
    width: 260px;
    .el-menu {
      width: 100% !important;
      height: 100%;
    }
    .el-submenu .el-menu-item {
      min-width: 0 !important;
    }
  }
  .content-container {
    flex:1;
    overflow-y: auto;
    padding: 20px 20px 20px 0px;
    .el-row{
      >.item{
        padding: 5px;
      }
    }
    .breadcrumb-container {
      border-left: 6px solid @blue-5;
      padding: 5px 10px;
      .borderRadius(3px);
      .BC(@light-blue-1);
      .title {
        float: left;
        margin: 0;
        .font2(20px, normal);
        font-weight: bold;
        color: @black-6;
        font-family: "幼圆", "Microsoft YaHei", "PingFang SC", sans-serif;
      }
      .breadcrumb-inner {
        float: right;
        span{
          .font2(14px, normal);
          line-height: 30px;
          color: @gray-4;
        }
        .el-breadcrumb__item:first-child{
          .el-breadcrumb__inner{
            color: @blue-6;
          }
        }
        .el-breadcrumb__separator{
          margin: 0;
        }
      }
    }
    .content-wrapper {
      background-color: transparent;
      box-sizing: border-box;
      padding: 10px 0;
      @media (min-width: 992px){
        padding: 10px 0;
      }
      .main-section{
        .label{
          margin-right: 5px;
        }
      }
      .el-form--inline {
        .el-form-item{
          margin-bottom: 10px;
        }
      }
    }
    .box-card{
      .boxShadow(none);
      .info-form{
        .el-form-item{
          .el-date-editor,
          .el-select,
          .el-date-editor--year,
          .el-input{
            width: 100%;
          }
        }
      }
      .el-card__header{
        .el-input-group__prepend{
          .BC(@blue-3);
          color: @white-1;
          border: 0;
        }
        .el-button{
          margin-left: 5px;
        }
        .check-card-btn{
          padding: 3px 10px;
          cursor: pointer;
        }
        .check-card-btn+.check-card-btn{
          border-left: 1px solid @light-gray-1;
        }
      }
      .cdetail-dialog{
        .cdetail-dialog-row{
          .el-form-item{
            .el-select{
              width: 100%;
            }
          }
        }
      }
      .article-content-col-box{
        margin-bottom: 15px;
        h3{
          .font2(20px,normal);
          cursor: pointer;
          color: @blue-1;
          i{
            font-size: 18px;
          }
          &:hover{
            color: @blue-2;
            text-decoration: underline;
          }
        }
        .article-content{
          p{
            margin: 8px 0;
            color: @gray-5;
            text-indent: 3em;
            .font2(14px,normal)
          }
          .bottom{
            span{
              color: @gray-5;
              .font2(12px,normal)
            }
          }
        }
      }
      .no-data-box{
        text-align: center;
        color: @blue-1;
        .font2(20px,normal);
        margin: 50px 0 100px;
        color: @gray-5;
        span{
          display: block;
          margin-top: 10px;
        }
      }
      .article-card-content{
        img{
          margin: 10px 0;
          display: block;
          max-width: 750px;
        }
      }

      .bookList-box{
        border-bottom: 1px dashed @red-4;
        padding: 10px 5px;
        .library-listContent{
          padding-left: 10px;
          margin-top: 5px;
          .buyBook-box{
            a{
              margin-left: 8px;
              text-decoration: none;
              &:hover,&:focus{
                color: @red-2;
              }
            }
          }
          .bookIntro-box{
            p{
              margin: 5px 0;
              .font2(14px,normal);
              color: @gray-5;
              .lineClamp(3);
            }
          }
        }
        .library-listFooter{
          padding-left: 10px;
          margin-top: 10px;
          span{
            &:nth-child(1){
              float: left;
              color: @black-3;
            }
            &:nth-child(2){
              float: right;
              color: @gray-5;
            }
          }
        }
      }
    }
    .course-catalog-row{
      .course-card-box{
        .BC(@white-1);
        padding: 10px;
        .borderRadius(5px);
        .course-card-top{
          overflow: hidden;
          .course-banner{
            .borderRadius(5px);
            width: 100%;
          }
        }
        .course-card-content{
          h3{
            font-family: "幼圆", "Microsoft YaHei", "PingFang SC", sans-serif;
            margin: 5px 0;
            .font2(18px,bold)
          }
          .bottom{
            .course-student-info-box{
              display: block;
              span{
                float: left;
                .font2(14px,normal);
                color: @gray-5;
                &.bottom-footer{
                  .font1(14px,40px);
                }
              }
              span+span{
                margin-left: 15px;
              }
              .el-button{
                float: right;
                span{
                  i{
                    margin-left: 2px;
                    .transition(margin-left 0.4s)
                  }
                }
                &:hover{
                  span{
                    color: @red-2;
                    i{
                      margin-left: 6px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .table-card{
      .boxShadow(none);
      .el-card__header{
        .filter-form-box{
          &.advanced-search-form{
            margin-top: 10px;
          }
          .el-form-item{
            margin-right: 5px;
            margin-bottom: 0;
            .el-form-item__content{
              line-height: inherit;
              .el-button--mini{
                padding: 8px 10px;
              }
            }
          }
        }
      }
      .el-card__body{
        .toolbar{
          .BC(@white-1)
        }
      }
    }
    .el-dialog{
      min-width: 450px;
      max-width: 660px;
      .el-dialog__body{
        .el-form-item{
          .el-date-editor,
          .el-select,
          .el-date-editor--year,
          .el-input{
            width: 100%;
          }
        }
      }
      .relevancy-form-box{
        .el-form-item{
          .el-select,
          .el-date-editor--year{
            width: 49%;
            margin-bottom: 3px;
          }
        }
      }
    }
    .tinfo-head-box{
      .el-card__header {
        height: 132px;
        background-color: @white-3;
        padding: 0;
        .tinfo-title-header-box{
          position: relative;
          padding: 18px 20px;
          width: 100%;
          height: 132px;
          background: no-repeat center top;
          background-size: 100% auto;
          .Tinfo-title-btn{
            position: absolute;
            right: 20px;
            bottom: 20px;
          }
        }
      }
      .el-card__body{
        .user-title-row{
          .T-headImage-box{
            float: left;
            .T-headImage{
              margin: -106px 0 0 20px;
              .boxSize1(166px);
              border: 8px solid @white-3;
              .borderRadius(5px);
              .BC(@white-1);
              position: relative;
              cursor: pointer;
              img{
                .borderRadius(5px);
                .boxSize1(150px);
              }
              .T-msking-box{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                display: block;
                line-height: 150px;
                font-size: 100px;
                color: #fff;
                text-align: center;
                .BC(rgba(0,0,0,0.8));
                .transition(height 0.6s);
                overflow: hidden;
              }
              &:hover{
                .T-msking-box{
                  height: 100%;
                }
              }
            }
          }
          .A-name-box{
            display: block;
            margin-left: 30px;
            text-align: center;
            h3{
              text-align: center;
              display: block;
              margin: 10px 0 0;
              .font2(27px,bold);
              span{
                .font2(20px,normal);
                letter-spacing: 3px;
                margin-left: 10px;
                vertical-align: -2px;
              }
            }
            span.tag-box{
              .borderRadius(5px);
              padding: 2px 5px;
              .font2(12px,normal);
              margin: 0 3px;
              color: @white-1;
              &:nth-child(4n+1){
                .BC(@red-3);
              }
              &:nth-child(4n+2){
                .BC(@blue-3);
              }
              &:nth-child(4n+3){
                .BC(@yellow-3);
              }
              &:nth-child(4n+4){
                .BC(#93D1F3);
              }
            }
            .T-info-box{
              .font2(14px,normal);
              color: @gray-5;
              margin-top: 10px;
              padding-left: 3px;
            }
          }
          .T-name-box{
            float: left;
            display: inline-block;
            margin-left: 30px;
            h3{
              display: inline-block;
              margin: 10px 0 0;
              .font2(27px,bold);
              letter-spacing: 5px;
              span{
                .font2(20px,normal);
                letter-spacing: 3px;
                margin-left: 10px;
                vertical-align: -2px;
              }
            }
            .T-info-box{
              .font2(14px,normal);
              color: @gray-5;
              margin-top: 10px;
              padding-left: 3px;
            }
          }
        }
      }
    }
    .tinfo-body-box{
      .el-card__header {
        span.card-tag{
          line-height: 32px;
          display: inline-block;
        }
        padding: 10px 20px;
      }
      .el-card__body{
        p{
          margin: 0;
          padding: 10px;
          span{
            margin-left: 5px;
          }
        }
      }
    }
    .editor-container{
      .editor-text{
        .font2(16px,normal);
        display: block;
        padding-left: 5px;
        margin-bottom: 5px;
        font{
          margin-left: 5px;
          .font2(12px,normal);
          color: @red-1
        }
      }
      .edui-editor{
        .edui-editor-toolbarbox {
          box-shadow: none;
          .edui-editor-toolbarboxouter {
            .edui-editor-toolbarboxinner {
              .BC(@white-4);
            }
          }
        }
      }
      .editor-row{
        margin-top: 10px;
        >.el-col{
          &:nth-child(2){
            .el-select{
              padding: 0 5px 0 0;
            }
          }
          .el-cascader,
          .el-select{
            width: 100%;
            padding: 0 0 0 5px;
          }
        }
      }
    }
    .cdetail-row{
      .box-card{
        margin-bottom: 10px;
        h3{
          .font2(14px,normal);
          font-family: "幼圆", "Microsoft YaHei", "PingFang SC", sans-serif;
          .font2(22px,bold);
          margin: 0 0 0 5px;
          i{
            margin-right: 8px;
            color: @blue-2;
          }
        }
        .el-tree{
          .custom-tree-node{
            width: 100%;
            position: relative;
            .btn-box{
              position: absolute;
              top: 0;
              right: 10px;
              .el-button--text{
                padding: 0;
              }
            }
          }
        }
      }
      .cdetail-title-row{
        img{
          width: 100%;
        }
        position: relative;
        .cdetail-title-content-box{
          padding: 0 0 20px 20px;
          p{
            .font2(14px,normal);
            color: @gray-5;
            text-indent: 2em;
            margin-top: 0;
          }
          .cdetail-title-btn-box{
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
    }
  }
}